<template>
  <div class="min-h-screen bg-gray-50 flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-gradient-to-r from-emerald-600 to-emerald-800 text-white shadow-md">
      <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center space-x-2">
          <i class="fa fa-leaf text-2xl"></i>
          <h1 class="text-xl font-bold">碳积分管理平台</h1>
        </div>
        <div class="flex items-center space-x-6">
          <button class="hover:text-emerald-200 transition-colors relative">
            <i class="fa fa-bell-o"></i>
            <span class="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full"></span>
          </button>
          <div class="flex items-center space-x-2">
            <img src="https://picsum.photos/id/1005/40/40" alt="管理员头像" class="w-8 h-8 rounded-full object-cover">
            <span>管理员</span>
          </div>
        </div>
      </div>
    </header>

    <!-- 主内容区 -->
    <div class="flex flex-1 overflow-hidden">
      <!-- 侧边栏导航 -->
      <aside class="bg-white w-64 shadow-md flex-shrink-0 hidden md:block">
        <nav class="py-4">
          <ul>
            <li>
              <!-- 侧边栏导航链接 -->
              <router-link
                  to="/admin/dashboard"
                  class="flex items-center px-6 py-3 transition-colors"
                  :class="$route.name === 'Dashboard' ? 'text-emerald-700 bg-emerald-50 border-l-4 border-emerald-600' : 'text-gray-600 hover:bg-emerald-50'"
              >
                <i class="fa fa-tachometer w-5 text-center mr-3"></i>
                <span>控制面板</span>
              </router-link>

              <router-link
                  to="/admin/CompanyManagement"
                  class="flex items-center px-6 py-3 transition-colors"
                  :class="$route.name === 'CompanyManagement' ? 'text-emerald-700 bg-emerald-50 border-l-4 border-emerald-600' : 'text-gray-600 hover:bg-emerald-50'"
              >
                <i class="fa fa-industry w-5 text-center mr-3"></i>
                <span>厂商管理</span>
              </router-link>

              <router-link
                  to="/admin/UserManagement"
                  class="flex items-center px-6 py-3 transition-colors"
                  :class="$route.name === 'UserManagement' ? 'text-emerald-700 bg-emerald-50 border-l-4 border-emerald-600' : 'text-gray-600 hover:bg-emerald-50'"
              >
                <i class="fa fa-users w-5 text-center mr-3"></i>
                <span>用户管理</span>
              </router-link>

              <router-link
                  to="/admin/TransactionRecords"
                  class="flex items-center px-6 py-3 transition-colors"
                  :class="$route.name === 'TransactionRecords' ? 'text-emerald-700 bg-emerald-50 border-l-4 border-emerald-600' : 'text-gray-600 hover:bg-emerald-50'"
              >
                <i class="fa fa-exchange w-5 text-center mr-3"></i>
                <span>交易记录</span>
              </router-link>

              <router-link
                  to="/admin/systemSettings"
                  class="flex items-center px-6 py-3 transition-colors"
                  :class="$route.name === 'SystemSettings' ? 'text-emerald-700 bg-emerald-50 border-l-4 border-emerald-600' : 'text-gray-600 hover:bg-emerald-50'"
              >
                <i class="fa fa-cog w-5 text-center mr-3"></i>
                <span>系统设置</span>
              </router-link>

              <router-link
                  to="/admin/systemMaintenance"
                  class="flex items-center px-6 py-3 transition-colors"
                  :class="$route.name === 'SystemMaintenance' ? 'text-emerald-700 bg-emerald-50 border-l-4 border-emerald-600' : 'text-gray-600 hover:bg-emerald-50'"
              >
                <i class="fa fa-wrench w-5 text-center mr-3"></i>
                <span>系统维护</span>
              </router-link>
              <router-link
                  to="/index"
                  class="flex items-center px-6 py-3 transition-colors"
                  :class="$route.name === 'Index' ? 'text-emerald-700 bg-emerald-50 border-l-4 border-emerald-600' : 'text-gray-600 hover:bg-emerald-50'"
              >
                <i class="fa fa-sign-out w-5 text-center mr-3"></i>
                <span>退出登录</span>
              </router-link>
            </li>
          </ul>
        </nav>
      </aside>

      <!-- 动态内容区（路由出口） -->
      <main class="flex-1 overflow-y-auto bg-gray-50 p-6">
        <router-view />
      </main>
    </div>
  </div>
</template>

<script setup>
// 无需额外逻辑，路由自动渲染内容
</script>

<style scoped>
/* 滚动条美化 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}
</style>